<script setup>
import { ref, onMounted, reactive } from 'vue'
import Menu from './Menu.vue';

defineProps({
  msg: {
    type: String,
    required: true
  },
  menu: {
    type: Object,
    required: false,
    default(){
        return [
            {name:'首页',url:'/home'},
            {name:'关于我们',url:'/aboutus'},
            {name:'业务领域',url:'/services'},
            {name:'产品中心',url:'/products'},
            {name:'质量控制',url:'/qualitys'},
            {name:'新闻中心',url:'/newscenter'},
            {name:'联系我们',url:'/contacts'}
        ]
    }
  }
})

const model = defineModel();
function handleScroll(){
    // 这里处理滚动事件，例如获取滚动位置等
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    // console.log('滚动位置:', scrollTop);
    // 根据滚动位置执行其他操作...
    if(scrollTop>window.innerHeight){
      model.value = false
    }else{
      model.value = true;
    }
    
      
}

onMounted(() => {
  // console.log('组件已经挂载')
  window.addEventListener('scroll', handleScroll);
  
})
const count = ref(0)
</script>

<template>
    <div class="w-full justify-center flex bg-dominant text-white">
        <div class="container w-full py-12 mobile:py-6 mobile:px-12 mobile:items-center">
            <div class="w-full flex py-[16] self-center">
                <div class="w-[144] flex-auto flex self-center">
                    <img class="mobile:mx-auto" src="/src/assets/logo.png" />
                </div>
            </div>
            <div class="w-full flex py-[16] self-center mobile:block mobile:max-w-[220px] mobile:mx-auto">
                <div class="w-full flex-auto">
                    <Menu class="py-8 self-start ilmobile:-translate-x-3 text-white/80 mobile:inline-block mobile:mx-auto leading-loose" :menu="menu" isFooter=true /> 
                </div>
                <div class="w-full flex py-[16] justify-end mobile:justify-center">
                    <ul class="w-auto flex flex-auto justify-end text-white/80 mobile:justify-center mobile:text-sm mobile:leading-loose">
                        <li class="w-32 mobile:w-1/3 self-center text-center"><span class="w-[48px] h-[48px] flex items-cneter p-[10px] mx-auto fa fa-wechat !text-2xl !leading-none border-2 rounded-full border-[#fff3]"></span><p class="mt-[12px] text-white/60">微信公众号</p></li>
                        <li class="w-32 mobile:w-1/3 self-center text-center"><span class="w-[48px] h-[48px] flex items-cneter p-[10px] mx-auto fa fa-twitter !text-2xl 
                          !leading-none border-2 rounded-full border-[#fff3]"></span><p class="mt-[12px] text-white/60">Twitter</p></li>
                        <li class="w-32 mobile:w-1/3 self-center text-center"><span class="w-[48px] h-[48px] flex items-cneter p-[10px] mx-auto fa fa-facebook !text-2xl !leading-none border-2 rounded-full border-[#fff3]"></span><p class="mt-[12px] text-white/60">Facebook</p></li>
                    </ul>
                </div>
            </div>
            <div class="w-full flex mobile:mt-12 mobile:justify-center">
              <p class="text-sm px-3 text-white/60 mobile:text-center">
                <span>闽ICP备19016649号-1</span>&nbsp;&nbsp;&nbsp;<span>闽公网安备 32050502000635号</span>
              </p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
